<template>
  <div>
    <div>
      <div v-permission="'selectUserPage'" class="keyWord2">
        <el-input style="width: 400px;" v-model="keyWord.rolemc" placeholder="请输入内容"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="showRole()">搜索</el-button>
        <el-button type="primary" icon="el-icon-search" @click="reset()">重置</el-button>
      </div>
    </div>
    <div style="padding: 0 80rem 5px 0">
      <el-button v-permission="'insertRole'" type="success" icon="el-icon-plus"
                 @click="newRoledialogVisible = true">新增角色</el-button>
    </div>
    <el-table :data="roles" border class="etable">
      <el-table-column align="center" prop="roleBh" label="角色编号">
      </el-table-column>
      <el-table-column align="center" prop="roleMc" label="角色名">
      </el-table-column>
      <el-table-column align="center" prop="roleMs" label="角色描述">
      </el-table-column>
      <el-table-column align="center" prop="roleCjsj" label="角色创建时间">
      </el-table-column>
      <el-table-column align="center" prop="roleGxsj" label="角色更新时间">
      </el-table-column>
<!--      <el-table-column align="center" prop="roleDj" label="角色等级">-->
<!--      </el-table-column>-->
      <el-table-column align="center" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button v-permission="'updateRole'" @click="toupRole(scope.row)" type="primary" size="small">修改</el-button>
          <el-popconfirm v-if="dzJks.indexOf('deleteRole') != -1" style="margin-left: 10px;"
            title="删除该角色及其相关权限，请谨慎操作！！" @confirm="delRole(scope.row)">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-permission="'updateRole'" title="修改角色" :visible.sync="upRoledialogVisible" width="30%">
      <el-form :model="upRole" :rules="rules" ref="upRole" label-position="right" label-width="80px">
        <el-form-item label="角色名" prop="roleMc">
          <el-input v-model="upRole.roleMc"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleMs">
          <el-input type="textarea"  :rows="2" size="small" v-model="upRole.roleMs"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resatUpRoleFrom">取 消</el-button>
          <el-button type="primary" @click="upRoleFun()">确 定</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
    <el-dialog v-permission="'insertRole'" title="新增角色" :visible.sync="newRoledialogVisible" width="30%">
      <el-form :model="newRole" :rules="rules" ref="newRole" label-position="right" label-width="80px">
        <el-form-item label="角色名" prop="roleMc">
          <el-input v-model="newRole.roleMc"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleMs">
          <el-input type="textarea"  :rows="2" size="small" v-model="newRole.roleMs"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resatnewRoleFrom">取 消</el-button>
          <el-button type="primary" @click="addRole()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../axios/axios.js"
import { selectRole, insertRole, updateRole } from "@/api/role"
export default {
  data() {
    return {
      roles: [],
      keyWord: {},
      newRoledialogVisible: false,
      upRoledialogVisible: false,
      upRole: {
        roleMc: "",
        roleMs: "",
      },
      newRole: {
        roleMc: "",
        roleMs: "",
      },
      rules: {
        roleMc: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        roleMs: [
          { required: true, message: '请填写角色描述', trigger: 'change' }
        ]
      },
      dzJks: []
    }
  },
  created() {
    this.showRole()
    this.dzJks = localStorage.getItem("dzJks").split(",")
  },
  methods: {
    reset(){
      this.keyWord = {}
    },
    showRole() {
      selectRole({
        keyWord: {
          rolemc:this.keyWord.rolemc
        }
      }).then(res => {
            if (res.code == "200") {
              this.roles = res.data
            }
      })
    },
    toupRole(role) {
      this.upRole = { ...role };
      this.upRoledialogVisible = true
    },
    upRoleFun() {
      this.$refs['upRole'].validate((valid) => {
        if (valid) {
          updateRole(this.upRole).then(res => {
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                type: "success"
              })
              this.upRole = {}
              this.upRoledialogVisible = false;
              this.showRole()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false;
        }
      })

    },
    resatUpRoleFrom() {
      this.$refs.upRole.resetFields();
      this.upRoledialogVisible = false
    },
    resatnewRoleFrom() {
      this.$refs.newRole.resetFields();
      this.newRoledialogVisible = false
    },
    addRole() {
      if (this.newRole.level < 2) {
        this.$message.error("请输入角色等级大于1！")
      } else {
        this.$refs['newRole'].validate((valid) => {
          if (valid) {
            insertRole(this.newRole).then(res => {
              if (res.code == "200") {
                this.$message({
                  message: res.msg,
                  type: "success"
                })
                this.newRole = {}
                this.newRoledialogVisible = false;
                this.showRole()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    delRole(role) {
      axios({
        method: "POST",
        url: "/qxglRole/deleteRole/" + role.roleBh
      }).then(res => {
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            type: "success"
          })
          this.showRole()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style>
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #FFF;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  width: 25%;
}

.keyWord2{
  width:40rem;
  position: relative;
  left:50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 20px 0 20px 0;
}
</style>
